<template>
  <div>
  <div align="center">
    <label size="large" label-width="280px">— — — — — — — — — — </label><br/>
    <label size="large" label-width="280px">* * * 供水风险模型评估 * * *</label><br/>
    <label size="large" label-width="280px">— — — — — — — — — — </label>
  </div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="280px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备编号" prop="number" required>
            <el-input v-model="formData.number" placeholder="请输入设备编号，如GS00001" show-word-limit clearable
                      prefix-icon='el-icon-s-tools' :style="{width: '60%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管龄" prop="gwjb_gl">
            <el-select v-model="formData.gwjb_gl" placeholder="请输入管龄" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in gwjb_glOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="管材" prop="gwjb_gc">
            <el-select v-model="formData.gwjb_gc" placeholder="请选择管材" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in gwjb_gcOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="埋深" prop="gwjb_ms">
            <el-select v-model="formData.msjb_ms" placeholder="请选择管材" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in gwjb_msOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="管道上是否有附属设施" prop="gwjb_gdss">
            <el-select v-model="formData.gwjb_gdss" placeholder="请输入管道上是否有附属设施" clearable
                       :style="{width: '60%'}">
              <el-option v-for="(item, index) in gwjb_gdssOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金属材质管道的防腐层是否被破坏" prop="zrph_jscz">
            <el-select v-model="formData.zrph_jscz" placeholder="请输入金属材质管道的防腐层是否被破坏" clearable
                       :style="{width: '60%'}">
              <el-option v-for="(item, index) in zrph_jsczOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="管道周边100米范围内有无地质灾害隐患点" prop="zrph_gdzb">
            <el-select v-model="formData.zrph_gdzb" placeholder="请输入管道周边100米范围内有无地质灾害隐患点" clearable
                       :style="{width: '60%'}">
              <el-option v-for="(item, index) in zrph_gdzbOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="管道所在地区域类型" prop="rlph_gdsz">
            <el-select v-model="formData.rlph_gdsz" placeholder="请输入管道所在地区域类型" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in rlph_gdszOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="管道上方用地类型" prop="rlph_gdsf">
            <el-select v-model="formData.rlph_gdsf" placeholder="请选择管道上方用地类型" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in rlph_gdsfOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管道防护措施" prop="rlph_gdfh">
            <el-select v-model="formData.rlph_gdfh" placeholder="请选择管道防护措施" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in rlph_gdfhOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所在路网类型" prop="szlw">
            <el-select v-model="formData.szlw" placeholder="请选择所在路网类型" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in szlwOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--<el-col :span="12">
          <el-form-item label="压力等级" prop="yldj">
            <el-select v-model="formData.yldj" placeholder="请选择压力等级" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in yldjOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所在区域人口密度" prop="szqy">
            <el-select v-model="formData.szqy" placeholder="请选择所在区域人口密度" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in szqyOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在区域经济密度" prop="szqyjj">
            <el-select v-model="formData.szqyjj" placeholder="请选择所在区域经济密度" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in szqyjjOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="周边3公里范围内大用水用户数量" prop="zbsg">
            <el-select v-model="formData.zbsg" placeholder="请选择周边3公里范围内大用水用户数量" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in zbsgOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边压力流量漏失监测仪报警情况" prop="zbyl">
            <el-select v-model="formData.zbyl" placeholder="请选择周边压力流量漏失监测仪报警情况" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in yldjOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="管径" prop="gj">
            <el-input-number step="1" v-model="formData.gj" placeholder="请输入管径，单位mm" show-word-limit clearable
                      prefix-icon='el-icon-s-tools' :style="{width: '60%'}"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="季节" prop="jj">
            <el-select v-model="formData.jj" placeholder="请选择季节" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in jjOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="近3年的泄漏情况" prop="jsnd ">
            <el-select v-model="formData.jsnd " placeholder="请选择近3年的泄漏情况" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in jsndOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="泄漏后的维修情况" prop="xlhd">
            <el-select v-model="formData.xlhd" placeholder="请选择泄漏后的维修情况" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in xlhdOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="管道上漏失声波报警情况" prop="gdsl">
            <el-select v-model="formData.gdsl" placeholder="请选择管道上漏失声波报警情况" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in gdslOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报警处置情况" prop="bjcz">
            <el-select v-model="formData.bjcz" placeholder="请选择报警处置情况" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in bjczOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="评估结果"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>编号:{{number}}；得分：{{score}}；风险等级：{{name}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>


</template>


<script>
  import {handleGS} from "../../../api/edu/risk";

  export default {
    components: {},
    props: [],
    data() {
      return {
        centerDialogVisible : false,
        number : '',
        name : '',
        score : '',
        formData: {
          number: '',
          gwjb_gl: '',
          gwjb_gc: undefined,
          gwjb_ms: undefined,
          gwjb_gdss: undefined,
          zrph_jscz: undefined,
          zrph_gdzb: undefined,
          rlph_gdsz: undefined,
          rlph_gdsf: undefined,
          rlph_gdfh: undefined,
          jj: undefined,
          yldj: undefined,
          gj: undefined,
          szlw: undefined,
          szqy: undefined,
          szqyjj: undefined,
          jsnd: undefined,
          xlhd: undefined,
          zbrq: undefined,
          bjcz: undefined,
          zbsg: undefined,
        },
        rules: {
          number: [],
          gwjb_gl: [],
          gwjb_gc: [],
          gwjb_ms: [],
          gwjb_gdss: [],
          zrph_jscz: [],
          zrph_gdzb: [],
          rlph_gdsz: [],
          rlph_gdsf: [],
          rlph_gdfh: [],
          jj: [],
          yldj: [],
          zbwb: [],
          szlw: [],
          szqy: [],
          szqyjj: [],
          jsnd: [],
          xlhd: [],
          zbrq: [],
          bjcz: [],
        },
        gwjb_glOptions: [{
          "label": "≤5年",
          "value": 1
        }, {
          "label": ">5年，≤15年",
          "value": 2
        }, {
          "label": "＞15年",
          "value": 3
        }],
        gwjb_gcOptions: [{
          "label": "铸铁",
          "value": 1
        }, {
          "label": "钢制",
          "value": 2
        }, {
          "label": "PE",
          "value": 3
        }, {
          "label": "水泥",
          "value": 4
        }],
        gwjb_msOptions: [{
          "label": "≤0.8米",
          "value": 1
        }, {
          "label": ">0.8米，≤1.5米",
          "value": 2
        }, {
          "label": "＞1.5米",
          "value": 3
        }],
        gwjb_gdssOptions: [{
          "label": "有三通、阀门、监测仪表",
          "value": 1
        }, {
          "label": "无",
          "value": 2
        }],
        zrph_jsczOptions: [{
          "label": "是",
          "value": 1
        }, {
          "label": "否",
          "value": 2
        }],
        zrph_gdzbOptions: [{
          "label": "有",
          "value": 1
        }, {
          "label": "无",
          "value": 2
        }],
        rlph_gdszOptions: [{
          "label": "城镇",
          "value": 1
        }, {
          "label": "城郊",
          "value": 2
        }, {
          "label": "农村",
          "value": 3
        }],
        rlph_gdsfOptions: [{
          "label": "快车道",
          "value": 1
        }, {
          "label": "慢车道",
          "value": 2
        }, {
          "label": "绿化带",
          "value": 3
        }, {
          "label": "人行道",
          "value": 4
        }],
        rlph_gdfhOptions: [{
          "label": "无标志物",
          "value": 1
        }, {
          "label": "有标志物",
          "value": 2
        }, {
          "label": "有多种防护措施",
          "value": 3
        }],
        jjOptions: [{
          "label": "冬、夏",
          "value": 1
        }, {
          "label": "春、秋",
          "value": 2
        }],
        zbsgOptions: [{
          "label": "1-3个",
          "value": 1
        }, {
          "label": "4-5个",
          "value": 2
        }, {
          "label": "5个以上",
          "value": 3
        }],
        yldjOptions: [{
          "label": "高压",
          "value": 1
        }, {
          "label": "次高压",
          "value": 2
        }, {
          "label": "中低压",
          "value": ""
        }],
        zbylOptions: [{
          "label": "是",
          "value": 1
        }, {
          "label": "否",
          "value": 2
        }],
        /*gjOptions: [{
          "label": "小于等于2",
          "value": 1
        }, {
          "label": "大于2，小于等于5",
          "value": 2
        }, {
          "label": "大于5",
          "value": ""
        }],*/
        szlwOptions: [{
          "label": "双向≤4车道",
          "value": 1
        }, {
          "label": "双向≤8车道",
          "value": 2
        }],
        szqyOptions: [{
          "label": "低于东营市整体区域人口密度ρ≤1",
          "value": 1
        }, {
          "label": "高于东营市整体区域人口密度1˂ρ≤1.5",
          "value": 2
        }, {
          "label": "高于东营市整体区域人口密度ρ>1.5",
          "value": 3
        }],
        szqyjjOptions: [{
          "label": "低于东营市整体区域经济密度ρ≤1",
          "value": 1
        }, {
          "label": "高于东营市整体区域经济密度1˂ρ≤1.5",
          "value": 2
        }, {
          "label": "高于东营市整体区域经济密度ρ>1.5",
          "value": 3
        }],
        jsndOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
        xlhdOptions: [{
        "label": "更换管道",
        "value": 1
      }, {
        "label": "焊接或其他方式",
        "value": 2
      }],
        gdslOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
        bjczOptions: [{
        "label": "正在处置",
        "value": 1
      }, {
        "label": "未处置",
        "value": 2
      }],
    }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        handleGS(this.formData).then(response => {
          console.log(response)
          this.number = response.number;
          this.score = response.score,
          this.name = response.name,
          this.centerDialogVisible = true
        });
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
</style>
